<template>
<div>
  <div   @click="isShowInfo=true"  v-bind:class="[isStyleEn ? 'classEn' : 'classNormal']" >
      {{ txtInfo }}
  </div>
  <DlgInfo  :dialog-visible="isShowInfo"  @res-info="handleResultInfo"></DlgInfo>
</div>
</template>

<script>

import DlgInfo from './DlgInfo.vue';

export default {
  name: 'ZoneInfo',
  components: {
     DlgInfo
  },

  computed:{
    // ...mapState('hg3000alarm', ['alarmdat'])
    // ...mapState('hg3000alarm', {
    //   alarmdat: state => state.alarmdat
    // })
    txtInfo( ){
      return this.$store.state.hg3000alarm.txtInfo;
    },
  },    

  watch: {
        txtInfo( newv, oldv  ) {
            this.isStyleEn = true
        },
    },

  data() {
    return {
      isShowInfo: false,
      isStyleEn: false,   //增强反显示
    }
  },

  created() {
  },


  mounted() {

  },

  unmounted() {

  },

  methods: {

    handleResultInfo(  ){
      this.isShowInfo = false
      this.isStyleEn = false
    }
  }
}
</script>


<style scoped>
.classNormal{
  cursor: pointer;  
  background-color: lightgray;
}

.classEn{
  cursor: pointer;  
  background-color: white;
  color: black;
}
</style>

